<template>
  <div class="Recharge" v-loading="loading">
    <h3><span class="tag"></span>金币充值档位</h3>
    <div class="head">
      <span>Ios金币充值档位</span>
      <el-button size="small" class="btn" @click="iosAdd">新增</el-button>
    </div>
    <el-table
      :data="iosTableData"
      style="width: 100%; margin-top: 10px"
      :header-cell-style="{ background: '#f5f7fa' }"
    >
      <el-table-column prop="gold" label="钻石数量">
        <template slot-scope="scope">
          <el-input
            placeholder="请输入金币数量"
            onkeyup="this.value=value.replace(/[^\d{1,}\.\d{1,}|\d{1,}]/g,'')"
            v-model="scope.row.gold"
          ></el-input>
        </template>
      </el-table-column>
      <el-table-column prop="jifen" label="充值金额">
        <template slot-scope="scope">
          <el-input
            placeholder="请输入充值金额"
            onkeyup="this.value=value.replace(/[^\d{1,}\.\d{1,}|\d{1,}]/g,'')"
            v-model="scope.row.rmb"
          ></el-input>
        </template>
      </el-table-column>
      <el-table-column prop="jifen" label="充值ID">
        <template slot-scope="scope">
          <el-input
            placeholder="请输入充值ID"
            v-model="scope.row.appleGoodsId"
          ></el-input>
        </template>
      </el-table-column>
      <el-table-column prop="desc" label="充值描述">
        <template slot-scope="scope">
          <el-input
            placeholder="请输入充值描述"
            v-model="scope.row.desc"
          ></el-input>
        </template>
      </el-table-column>
      <el-table-column prop="giveGold" label="赠送金币">
        <template slot-scope="scope">
          <el-input
            placeholder="请输入赠送数量"
            onkeyup="this.value=value.replace(/[^\d{1,}\.\d{1,}|\d{1,}]/g,'')"
            v-model="scope.row.giveGold"
          ></el-input>
        </template>
      </el-table-column>
      <el-table-column prop="firstRecharge" label="首充金额">
        <template slot-scope="scope">
          <el-input
            placeholder="请输入首充金额"
            onkeyup="this.value=value.replace(/[^\d{1,}\.\d{1,}|\d{1,}]/g,'')"
            v-model="scope.row.firstRecharge"
          ></el-input>
        </template>
      </el-table-column>
      <el-table-column prop="firstRechargeGiveGold" label="首充赠送金币数">
        <template slot-scope="scope">
          <el-input
            placeholder="请输入首充赠送金币数"
            onkeyup="this.value=value.replace(/[^\d{1,}\.\d{1,}|\d{1,}]/g,'')"
            v-model="scope.row.firstRechargeGiveGold"
          ></el-input>
        </template>
      </el-table-column>
      <el-table-column prop="address" label="操作">
        <template slot-scope="scope">
          <el-button
            type="primary"
            size="small"
            @click="iosSubmit(scope.row)"
            plain
            >确认</el-button
          >
          <el-button
            size="small"
            @click="iosDel(scope.row.id, scope.$index, scope.row.gold)"
            plain
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <!-- 安卓 -->
    <div class="head">
      <span>Android金币充值档位</span>
      <el-button size="small" class="btn" @click="androidAdd">新增</el-button>
    </div>
    <el-table
      :data="androidTableData"
      style="width: 100%; margin-top: 10px"
      :header-cell-style="{ background: '#f5f7fa' }"
    >
      <el-table-column prop="gold" label="钻石数量">
        <template slot-scope="scope">
          <el-input
            placeholder="请输入金币数量"
            onkeyup="this.value=value.replace(/[^\d{1,}\.\d{1,}|\d{1,}]/g,'')"
            v-model="scope.row.gold"
          ></el-input>
        </template>
      </el-table-column>
      <el-table-column prop="jifen" label="充值金额">
        <template slot-scope="scope">
          <el-input
            placeholder="请输入充值金额"
            onkeyup="this.value=value.replace(/[^\d{1,}\.\d{1,}|\d{1,}]/g,'')"
            v-model="scope.row.rmb"
          ></el-input>
        </template>
      </el-table-column>
      <!-- <el-table-column prop="jifen" label="充值ID">
        <template slot-scope="scope">
          <el-input
            placeholder="请输入充值ID"
            v-model="scope.row.chongzhiID"
          ></el-input>
        </template>
      </el-table-column> -->
      <el-table-column prop="desc" label="充值描述">
        <template slot-scope="scope">
          <el-input
            placeholder="请输入充值描述"
            v-model="scope.row.desc"
          ></el-input>
        </template>
      </el-table-column>
      <el-table-column prop="giveGold" label="赠送金币">
        <template slot-scope="scope">
          <el-input
            placeholder="请输入赠送数量"
            onkeyup="this.value=value.replace(/[^\d{1,}\.\d{1,}|\d{1,}]/g,'')"
            v-model="scope.row.giveGold"
          ></el-input>
        </template>
      </el-table-column>
      <el-table-column prop="firstRecharge" label="首充金额">
        <template slot-scope="scope">
          <el-input
            placeholder="请输入首充金额"
            onkeyup="this.value=value.replace(/[^\d{1,}\.\d{1,}|\d{1,}]/g,'')"
            v-model="scope.row.firstRecharge"
          ></el-input>
        </template>
      </el-table-column>
      <el-table-column prop="firstRechargeGiveGold" label="首充赠送金币数">
        <template slot-scope="scope">
          <el-input
            placeholder="请输入首充赠送金币数"
            onkeyup="this.value=value.replace(/[^\d{1,}\.\d{1,}|\d{1,}]/g,'')"
            v-model="scope.row.firstRechargeGiveGold"
          ></el-input>
        </template>
      </el-table-column>
      <el-table-column prop="address" label="操作">
        <template slot-scope="scope">
          <el-button
            type="primary"
            size="small"
            @click="androidSubmit(scope.row)"
            plain
            >确认</el-button
          >
          <el-button
            size="small"
            @click="androidDel(scope.row.id, scope.$index, scope.row.gold)"
            plain
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <!-- web -->
    <div class="head">
      <span>web金币充值档位</span>
      <el-button size="small" class="btn" @click="webAdd">新增</el-button>
    </div>
    <el-table
      :data="webTableData"
      style="width: 100%; margin-top: 10px"
      :header-cell-style="{ background: '#f5f7fa' }"
    >
      <el-table-column prop="gold" label="钻石数量">
        <template slot-scope="scope">
          <el-input
            placeholder="请输入金币数量"
            onkeyup="this.value=value.replace(/[^\d{1,}\.\d{1,}|\d{1,}]/g,'')"
            v-model="scope.row.gold"
          ></el-input>
        </template>
      </el-table-column>
      <el-table-column prop="jifen" label="充值金额">
        <template slot-scope="scope">
          <el-input
            placeholder="请输入充值金额"
            onkeyup="this.value=value.replace(/[^\d{1,}\.\d{1,}|\d{1,}]/g,'')"
            v-model="scope.row.rmb"
          ></el-input>
        </template>
      </el-table-column>
      <!-- <el-table-column prop="jifen" label="充值ID">
        <template slot-scope="scope">
          <el-input
            placeholder="请输入充值ID"
            v-model="scope.row.chongzhiID"
          ></el-input>
        </template>
      </el-table-column> -->
      <el-table-column prop="desc" label="充值描述">
        <template slot-scope="scope">
          <el-input
            placeholder="请输入充值描述"
            v-model="scope.row.desc"
          ></el-input>
        </template>
      </el-table-column>
      <el-table-column prop="giveGold" label="赠送金币">
        <template slot-scope="scope">
          <el-input
            placeholder="请输入赠送数量"
            onkeyup="this.value=value.replace(/[^\d{1,}\.\d{1,}|\d{1,}]/g,'')"
            v-model="scope.row.giveGold"
          ></el-input>
        </template>
      </el-table-column>
      <el-table-column prop="firstRecharge" label="首充金额">
        <template slot-scope="scope">
          <el-input
            placeholder="请输入首充金额"
            onkeyup="this.value=value.replace(/[^\d{1,}\.\d{1,}|\d{1,}]/g,'')"
            v-model="scope.row.firstRecharge"
          ></el-input>
        </template>
      </el-table-column>
      <el-table-column prop="firstRechargeGiveGold" label="首充赠送金币数">
        <template slot-scope="scope">
          <el-input
            placeholder="请输入首充赠送金币数"
            onkeyup="this.value=value.replace(/[^\d{1,}\.\d{1,}|\d{1,}]/g,'')"
            v-model="scope.row.firstRechargeGiveGold"
          ></el-input>
        </template>
      </el-table-column>
      <el-table-column prop="address" label="操作">
        <template slot-scope="scope">
          <el-button
            type="primary"
            size="small"
            @click="webSubmit(scope.row)"
            plain
            >确认</el-button
          >
          <el-button
            size="small"
            @click="webDel(scope.row.id, scope.$index, scope.row.gold)"
            plain
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import {
  configQueryRechargeGoldList,
  configDelGlobRecharge,
  configAddGlobRecharge,
} from "@/api/operationManagement";
export default {
  data() {
    return {
      loading: false,
      iosTableData: [],
      androidTableData: [],
      webTableData: [],
    };
  },
  methods: {
    async iosSubmit(obj) {
      if (obj.appleGoodsId == "") {
        this.$message.error("充值ID不能为空！");
        return;
      }
      if (obj.gold == "") {
        this.$message.error("充值数量不能为空！");
        return;
      }
      if (obj.rmb == "") {
        this.$message.error("充值金额不能为空！");
        return;
      }
      const res = await configAddGlobRecharge({
        type: "ios",
        gold: obj.gold,
        rmb: obj.rmb,
        desc: obj.desc,
        give_gold: obj.giveGold,
        apple_goods_id: obj.appleGoodsId,
        first_recharge: obj.firstRecharge,
        first_recharge_give_gold: obj.firstRechargeGiveGold,
      });
      if (res.code == 0) {
        this.$message.success("操作成功！");
        this.getList();
      }
    },
    iosDel(id, index, gold) {
      if (id === "1") {
        this.iosTableData.splice(index, 1);
      } else {
        this.$confirm("是否删除该档位?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        })
          .then(async () => {
            const res = await configDelGlobRecharge({
              gold,
              type: "ios",
            });
            if (res.code == 0) {
              this.$message({
                type: "success",
                message: "删除成功!",
              });
              this.getList();
            }
          })
          .catch(() => {
            this.$message({
              type: "info",
              message: "已取消删除",
            });
          });
      }
    },
    iosAdd() {
      this.iosTableData.push({
        gold: "",
        id: "1",
        rmb: "",
        appleGoodsId: "",
        desc: "",
        giveGold: 0,
      });
    },
    //
    async androidSubmit(obj) {
      if (obj.gold == "") {
        this.$message.error("充值数量不能为空！");
        return;
      }
      if (obj.rmb == "") {
        this.$message.error("充值金额不能为空！");
        return;
      }
      const res = await configAddGlobRecharge({
        type: "android",
        gold: obj.gold,
        rmb: obj.rmb,
        desc: obj.desc,
        give_gold: obj.giveGold,
        apple_goods_id: "",
        first_recharge: obj.firstRecharge,
        first_recharge_give_gold: obj.firstRechargeGiveGold,
      });
      if (res.code == 0) {
        this.$message.success("操作成功！");
        this.getList();
      }
    },
    androidDel(id, index, gold) {
      if (id === "1") {
        this.androidTableData.splice(index, 1);
      } else {
        this.$confirm("是否删除该档位?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        })
          .then(async () => {
            const res = await configDelGlobRecharge({
              gold,
              type: "android",
            });
            if (res.code == 0) {
              this.$message({
                type: "success",
                message: "删除成功!",
              });
              this.getList();
            }
          })
          .catch(() => {
            this.$message({
              type: "info",
              message: "已取消删除",
            });
          });
      }
    },
    androidAdd() {
      this.androidTableData.push({
        gold: "",
        id: "1",
        rmb: "",
        desc: "",
        giveGold: 0,
      });
    },
    async webSubmit(obj) {
      if (obj.gold == "") {
        this.$message.error("充值数量不能为空！");
        return;
      }
      if (obj.rmb == "") {
        this.$message.error("充值金额不能为空！");
        return;
      }
      const res = await configAddGlobRecharge({
        type: "web",
        gold: obj.gold,
        rmb: obj.rmb,
        desc: obj.desc,
        give_gold: obj.giveGold,
        apple_goods_id: "",
        first_recharge: obj.firstRecharge,
        first_recharge_give_gold: obj.firstRechargeGiveGold,
      });
      if (res.code == 0) {
        this.$message.success("操作成功！");
        this.getList();
      }
    },
    webDel(id, index, gold) {
      if (id === "1") {
        this.webTableData.splice(index, 1);
      } else {
        this.$confirm("是否删除该档位?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        })
          .then(async () => {
            const res = await configDelGlobRecharge({
              gold,
              type: "web",
            });
            if (res.code == 0) {
              this.$message({
                type: "success",
                message: "删除成功!",
              });
              this.getList();
            }
          })
          .catch(() => {
            this.$message({
              type: "info",
              message: "已取消删除",
            });
          });
      }
    },
    webAdd() {
      this.webTableData.push({
        gold: "",
        id: "1",
        rmb: "",
        desc: "",
        giveGold: 0,
      });
    },
    async getList() {
      this.loading = true;
      const res = await configQueryRechargeGoldList();
      this.loading = false;
      if (res.code == 0) {
        this.iosTableData = res.data.ios;
        this.androidTableData = res.data.android;
        this.webTableData = res.data.web;
      }
    },
  },
  created() {
    this.getList();
  },
};
</script>

<style lang="less" scoped>
.Recharge {
  h3 {
    margin: 0 0;
    display: flex;
    align-items: center;
    .tag {
      display: inline-block;
      width: 5px;
      height: 18px;
      background-color: #7b94d8;
      margin-right: 10px;
    }
  }
  .head {
    margin-top: 20px;
    display: flex;
    justify-content: space-between;
    span {
      font-weight: bold;
    }
  }
}
</style>
